<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>登录</title>
		<meta name="viewport" content="width=device-width, initial-scale=1"/>
		<script src="js/jquery2.js"></script> 
		<script src="js/vue.js"></script>
		<script src="js/bootstrap.min.js"></script>
		<script src="js/md5.js"></script>
		<link href="css/bootstrap.min.css" rel="stylesheet" />
	</head>
	<body>
		<div class="container" id="app">
			<div class="page-header">
				<h1 class="text-center">用户登录</h1>
			</div>
			<div class="row">
				<div class="col-md-6 col-md-offset-3">
					<div class="form-group">
						<label class="control-label">登录名</label>
						<input class="form-control" type="text" v-model="LoginName" />
					</div>
					<div class="form-group">
						<label class="control-label">密码</label>
						<input class="form-control" type="password" v-model="PassWord" />
						
					</div>
					<div class="form-group">
						<label class="control-label">验证码</label>
						<div class="form-inline">
							<div class="form-group">
								
								<input class="form-control" type="text" v-model="code" />
								<img src="./code" id="lhl-code"   @click="releaseCode()">
							</div>
						</div>
						
					</div>
					<div class="form-group">
						<button class="btn btn-success" data-toggle="modal" data-target="#loginmodal" @click="Login">
							<span class="glyphicon glyphicon-upload"></span>
							登录，进入主页
						</button>
						<a href="./reguser" class="btn btn-info">
							<span class="glyphicon glyphicon-plus"></span>
							未注册，转到注册
						</a>
						<span class="help-block">
							登录既代表同意平台使用协议
							<a href="#">
								<code> 暂无协议 </code>
							</a>
						</span>
					</div>
				</div>
			</div>
			<!-- 弹出层 -->
			<div class="modal fade" id="loginmodal">
				<div class="modal-dialog">
					<div class="modal-content">
						<div class="modal-body">
							<div class="progress">
								<div class="progress-bar progress-bar-striped active" style="width: 100%;" v-bind:class="LoginModal.Class" ></div>
							</div>
							<h3 style="text-align: center;">{{LoginModal.Text}}</h3>
						</div>
					</div>
				</div>
			</div>
		</div>
	</body>
	<script>
		var app=new Vue({
			el:"#app",
			data:{
				LoginName:'',
				PassWord:'',
				code:'',
				LoginModal:{
					Text:'正在登录',
					Class:'progress-bar-warning',
				}
			},
			methods:{
				Login:function(){
					var Point=this;
					var login_name=this.LoginName;
					var password=hex_md5(this.PassWord);
					this.LoginModal.Text='正在登录';
					this.LoginModal.Class='progress-bar-warning';
					$.post("./userlogin",{
						login_name:login_name,
						password:password,
						code:this.code,
					},function(response){
						if (response=="success"){
							Point.LoginModal.Text='登录成功，3秒后进入主页';
							Point.LoginModal.Class='progress-bar-success';
							setTimeout(function(){$("#loginmodal").modal('hide');location.href="./userinfo"},3000);
						}else if (response=="codeerror"){
							Point.LoginModal.Text='登陆失败，验证码错误';
							Point.LoginModal.Class='progress-bar-danger';
							Point.code="";
							setTimeout(function(){$("#loginmodal").modal('hide');},3000);
						}else{
							Point.LoginModal.Text='登陆失败，用户名或密码错误';
							Point.LoginModal.Class='progress-bar-danger';
							setTimeout(function(){$("#loginmodal").modal('hide');},3000);
						}
					});
				},
				releaseCode:function(){
					//验证码重置
					var code=document.getElementById("lhl-code");
					var codeurl="./code";
					code.src="";
					code.src=codeurl+"?random="+Math.random();
					
				}
			}
		})
	</script>
</html>
